"use strict";
const common_vendor = require("../../../../common/vendor.js");
function number(value) {
  return /^(?:-?\d+|-?\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value);
}
function guid(len = 32, firstU = true, radix = null) {
  let chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split("");
  let uuid = [];
  radix = radix || chars.length;
  if (len) {
    for (let i = 0; i < len; i++)
      uuid[i] = chars[0 | Math.random() * radix];
  } else {
    let r;
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
    uuid[14] = "4";
    for (let i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | Math.random() * 16;
        uuid[i] = chars[i == 19 ? r & 3 | 8 : r];
      }
    }
  }
  if (firstU) {
    uuid.shift();
    return "u" + uuid.join("");
  } else {
    return uuid.join("");
  }
}
const _sfc_main = {
  name: "zero-lazy-load",
  emits: ["click", "load", "error", "finish"],
  props: {
    index: {
      type: [Number, String]
    },
    // 要显示的图片
    image: {
      type: String,
      default: ""
    },
    // 图片裁剪模式
    imgMode: {
      type: String,
      default: "widthFix"
    },
    // 占位图片路径
    loadingImg: {
      type: String,
      default: ""
    },
    // 加载失败的错误占位图
    errorImg: {
      type: String,
      default: ""
    },
    // 图片进入可见区域前多少像素时，单位rpx，开始加载图片
    // 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
    threshold: {
      type: [Number, String],
      default: 100
    },
    // 淡入淡出动画的过渡时间
    duration: {
      type: [Number, String],
      default: 500
    },
    // 渡效果的速度曲线，各个之间差别不大，因为这是淡入淡出，且时间很短，不是那些变形或者移动的情况，会明显
    // linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
    effect: {
      type: String,
      default: "ease-in-out"
    },
    // 是否使用过渡效果
    isEffect: {
      type: Boolean,
      default: true
    },
    // 圆角值
    borderRadius: {
      type: [Number, String],
      default: 0
    },
    // 图片高度，单位rpx
    height: {
      type: [Number, String],
      default: "300"
    }
  },
  data() {
    return {
      isShow: false,
      opacity: 1,
      time: this.duration,
      loadStatus: "",
      // 默认是懒加载中的状态
      isError: false,
      // 图片加载失败
      elIndex: guid()
    };
  },
  computed: {
    // 将threshold从rpx转为px
    getThreshold() {
      let thresholdPx = common_vendor.index.upx2px(Math.abs(this.threshold));
      return this.threshold < 0 ? -thresholdPx : thresholdPx;
    },
    // 计算图片的高度，可能为auto，带%，或者直接数值
    imgHeight() {
      return this.addUnit(this.height);
    }
  },
  created() {
    this.observer = {};
  },
  watch: {
    isShow(nVal) {
      if (!this.isEffect)
        return;
      this.time = 0;
      this.opacity = 0;
      setTimeout(() => {
        this.time = this.duration;
        this.opacity = 1;
      }, 30);
    },
    // 图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError
    image(n) {
      if (!n) {
        this.isError = true;
      } else {
        this.init();
        this.isError = false;
      }
    }
  },
  methods: {
    // 用于demo改变展示状态
    changeStatus(val) {
      if (val === 0) {
        this.isShow = false;
        this.loadStatus = "lazyed";
        this.isError = false;
      } else if (val === 1) {
        this.isShow = false;
        this.isError = true;
      } else {
        this.loadStatus = "loaded";
        this.isError = false;
        this.isShow = true;
      }
    },
    addUnit(value = "auto", unit = "rpx") {
      value = String(value);
      return number(value) ? `${value}${unit}` : value;
    },
    // 用于重新初始化
    init() {
      this.isError = false;
      this.loadStatus = "";
    },
    // 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
    clickImg() {
      if (this.isShow == false)
        ;
      else if (this.isError == true)
        ;
      else
        ;
      this.$emit("click", this.index);
    },
    // 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分
    imgLoaded() {
      if (this.loadStatus == "") {
        this.loadStatus = "lazyed";
      } else if (this.loadStatus == "lazyed") {
        this.loadStatus = "loaded";
        this.$emit("load", this.index);
        this.$emit("finish", this.index);
      }
    },
    // 错误的图片加载完成
    errorImgLoaded() {
      this.$emit("error", this.index);
      this.$emit("finish", this.index);
    },
    // 图片加载失败
    loadError() {
      this.isError = true;
    },
    disconnectObserver(observerName) {
      const observer = this[observerName];
      observer && observer.disconnect();
    }
  },
  beforeDestroy() {
  },
  mounted() {
    this.$nextTick(() => {
      common_vendor.index.$once("onReachBottom", () => {
        if (!this.isShow)
          this.isShow = true;
      });
    });
    setTimeout(() => {
      this.disconnectObserver("contentObserver");
      const contentObserver = common_vendor.index.createIntersectionObserver(this);
      contentObserver.relativeToViewport({
        bottom: this.getThreshold
      }).observe(".zero-lazy-item-" + this.elIndex, (res) => {
        if (res.intersectionRatio > 0) {
          this.isShow = true;
          this.disconnectObserver("contentObserver");
        }
      });
      this.contentObserver = contentObserver;
    }, 30);
  }
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return common_vendor.e({
    a: !$data.isError
  }, !$data.isError ? {
    b: $props.borderRadius + "rpx",
    c: $options.imgHeight,
    d: $data.isShow ? $props.image : $props.loadingImg,
    e: $props.imgMode,
    f: common_vendor.o((...args) => $options.imgLoaded && $options.imgLoaded(...args)),
    g: common_vendor.o((...args) => $options.loadError && $options.loadError(...args)),
    h: common_vendor.o((...args) => $options.clickImg && $options.clickImg(...args))
  } : {
    i: $props.borderRadius + "rpx",
    j: $options.imgHeight,
    k: $props.errorImg,
    l: $props.imgMode,
    m: common_vendor.o((...args) => $options.errorImgLoaded && $options.errorImgLoaded(...args)),
    n: common_vendor.o((...args) => $options.clickImg && $options.clickImg(...args))
  }, {
    o: common_vendor.n("zero-lazy-item-" + $data.elIndex),
    p: Number($data.opacity),
    q: $props.borderRadius + "rpx",
    r: `opacity ${$data.time / 1e3}s ease-in-out`,
    s: common_vendor.n("zero-lazy-item-" + $data.elIndex)
  });
}
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-56483887"], ["__file", "D:/Project/heart-3.0/heart-field-3.0/uni_modules/zero-lazy-load/components/zero-lazy-load/zero-lazy-load.vue"]]);
wx.createComponent(Component);
